<template>
	<view class="reply">
		<view class="top">
			<comment-item :closeBtn="true" :childState='true' :item="replyItem"></comment-item>
		</view>
		<view class="list">
			<view class="row" v-for="item in childReplyArr">
				<comment-item @removeEnv="commentEnv" :childState='true' :item="item"></comment-item>
			</view>
		</view>

		<view class="">
			<comment-frame @commentEnv="commentEnv" :commentObj="commentObj" :placeholder="`回复：${giveName(this.replyItem)}`"></comment-frame>
		</view>
	</view>
</template>

<script>
import { giveName, giveAvatar } from '@/utils/tools.js';
const db= uniCloud.database()
export default {
	data() {
		return {
			replyItem: null,
			commentObj: {
				article_id: '',
				comment_type: 1,

				reply_user_id: '', //被回复的用户id
				reply_comment_id: '' //被回复的评论的id
			},
			childReplyArr:[]
		};
	},
	onLoad() {
		//数据量少可以直接转为json传过来
		// let item=JSON.parse(e.item)
		// this.replyItem=item
		let replyItem = uni.getStorageSync('replyItem');
		if (!replyItem) return uni.navigateBack();
		this.replyItem = replyItem || {};

		this.commentObj.article_id = this.replyItem.article_id;
		this.commentObj.reply_user_id = this.replyItem.user_id[0]._id;
		this.commentObj.reply_comment_id = this.replyItem._id;

		this.getComment()
	},
	onUnload() {
		//清除缓存
		uni.removeStorageSync('replyItem');
	},
	methods: {
		giveName,
		giveAvatar,
		//评论成功后的回调
		commentEnv(){
			//刷新，不使用无感
			this.childReplyArr = []
			this.getComment()
		},

		//获取二级评论列表
		getComment() {
			let commentTemp = db.collection('quanzi_comment').where(`article_id == "${this.replyItem.article_id}" && comment_type==1 && reply_comment_id == "${this.replyItem._id}"`).orderBy('comment_date desc').limit(5).getTemp();
			let userTemp = db.collection('uni-id-users').field('_id, username, nickname, avatar_file').getTemp();

			db.collection(commentTemp, userTemp)
				.get()
				.then((res) => {
					if (res.result.data.length === 0) this.noComment = true;

					this.childReplyArr = res.result.data;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.reply {
	.top {
		padding: 30rpx;
		border-bottom: 15rpx solid #eee;
	}

	.list {
		padding: 30rpx;
		padding-bottom: 120rpx;
		.row {
			padding-bottom: 15rpx;
		}
	}
}
</style>
